<template>
  <Form v-model="model" :col="col" :list="computedList" ref="refForm">
    <template v-for="slot in slotKeys" :key="slot" #[slot]>
      <slot :name="slot" />
    </template>
  </Form>
  <Row>
    <Col :span="24" style="text-align: right">
      <Space>
        <CaretDownOutlined v-show="!showAllFilter" @click="showAllFilter = true" />
        <CaretUpOutlined v-show="showAllFilter" @click="showAllFilter = false" />
        <Button type="primary" @click="handleSearch">Search</Button>
        <Button @click="handleReset">Clear</Button>
      </Space>
    </Col>
  </Row>
</template>
<script setup lang="ts">
import type { Filter } from '../types/comp';

import { computed, ref, useSlots, useTemplateRef } from 'vue';

import { Row, Col, Button, Space } from 'ant-design-vue';

import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';

import Form from 'custom/form';

const props = defineProps<Filter>();

const model = defineModel();

const slots = useSlots();

const slotKeys = Object.keys(slots);

const refForm = useTemplateRef('refForm');

const showAllFilter = ref(false);

const computedList = computed(() => {
  return props.list.map((item, index) => {
    item.show = index < 3 || showAllFilter.value;
    return item;
  });
});

const handleSearch = async () => {
  showAllFilter.value = true;
  const res = await refForm.value?.handleSubmit();
  console.log(res);
};

const handleReset = () => {
  refForm.value?.handleReset();
};
</script>
